<div style="float: right">
{{#username}}
  Hi, {{username}} <a href="/service/logout">Logout</a>
{{/username}}
</div>

<form name="create_album" id="create_album"
      enctype="multipart/form-data"
      method="PUT"
      action="/v1/albums.json">

 <h2> Create New Album: </h2>
 <dl>
  <dt>Album Name:</dt>
  <dd><input type='text' name='name' id="name" size='30'/></dd>
  <dt>Title:</dt>
  <dd><input id="photo_file" type="text" name="title" size="30"/></dd>
  <dt>Description:</dt>
  <dd><textarea rows="5" cols="30" name="description"></textarea></dd>
 </dl>
 <input type="hidden" id="date" name="date" value=""/>
</form>

<input type="button" id="submit_button" value="Upload"/>

<div id="output"></div>

<script type="text/javascript">

  $("input#submit_button").click(function (e) {
      var m = new Date();
      var dateString =
          m.getUTCFullYear() +"/"+
          ("0" + (m.getUTCMonth()+1)).slice(-2) +"/"+
          ("0" + m.getUTCDate()).slice(-2) + " " +
          ("0" + m.getUTCHours()).slice(-2) + ":" +
          ("0" + m.getUTCMinutes()).slice(-2) + ":" +
          ("0" + m.getUTCSeconds()).slice(-2);

      $("input#date").val(dateString);

      var json = "{ \"name\": \"" + $("input#name").val()
          + "\", \"date\": \"" + $("input#date").val()
          + "\", \"title\": \"" + $("input#title").val()
          + "\", \"description\": \"" + $("textarea#description").val()
          + "\" }";

      $.ajax({
          type: "PUT",
          url: "/v1/albums.json",
          contentType: 'application/json',    // request payload type
          "content-type": "application/json",   // what we want back
          data: json,
          success: function (resp) {
              alert("Success! Going to album now");
              window.location = "/pages/album/" + $("input#name").val();
          }
      });
  });

</script>
